<template>
	<view class="img-list">
		<view :class="{block:true, selected : product.selected}" @click="imageclick(-1)" :index="-1" :key="-1">
			<image :src="product.image" />
		</view>
		<view class="block">
			<text>{{list.length}}款拼单返利商品可选</text>
		</view>

		<view :class="{block:true, selected : item.selected}" v-for="(item, index) in list" :index="index" :key="index"
			@click="imageclick(index)">
			<image :src="item.image" />
		</view>
		
		
	</view>

</template>

<script>
	import {getRebateList} from '@/api/activity'
	export default {
		components: {},
		props: {
			product_id: {
				type: Number,
				default: 0,
				required: true,
			},
			image: {
				type: String,
				default: '',
				required: true,
			},
		},
		mounted() {
			this.onBeforeCreate();
		},
		created() {
			this.product.product_id = this.$props.product_id;
			this.product.image = this.$props.image;
		},
		
		data() {
			return {
				selecteIndex: -1,
				isCreating: true,
				product:{
					"selected": true,
					"product_id": 0,
					"image": '',
				},
				list: [],

			}
		},
		watch: {},
		methods: {
			imageclick(index) {
				let productId = 0;
				if (this.selecteIndex != -1) {
					this.list[this.selecteIndex].selected = false;
				}
				if (index === -1) {
					this.product.selected = true;
					this.selecteIndex = -1;
					productId = this.product.product_id;
				} else {
					this.product.selected = false;
					this.list[index].selected = true;
					this.selecteIndex = index;
					productId = this.list[index].product_id;
				}
				this.$emit('changed', productId);
				// uni.navigateTo({
				// 	url: ``
				// });
			},
			onBeforeCreate() {
				const app = this
				app.isCreating = true
				Promise.all([app.getGroup(app.$props.product_id)])
					.finally(() => app.isCreating = false)
			},
			getGroup(id) {
				const app = this
				return new Promise((resolve, reject) => {
					getRebateList(id)
						.then(result => {
							app.list = result.data.list
							
							resolve(result)
						})
						.catch(reject)
				})
			},
		}
	}
</script>

<style lang="scss">
	.img-list {
		width: 100%;
		display: flex;
		overflow-x: auto;
	}

	.img-list .block {
		margin-top: 1px;
		padding: 5px 5px 5px 5px;
		height: 68px;
	}

	.block.selected {
		border: red solid 1px;
	}

	.img-list .block image {
		width: 55px;
		height: 55px;
	}

	.img-list .block text {
		width: 55px;
		display: flex;
		font-weight: bold;
	}
</style>